<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Cousine|Inconsolata" rel="stylesheet">
	<link rel="shortcut icon" type="image/png" href="/favicon.png">

	
	<link rel="stylesheet" href="/css/style.css">
	<link rel="stylesheet" href="/css/css/fontawesome-all.min.css">
	<script src="/js/main.js"></script>
	

	<!-- Begin Jekyll SEO tag v2.1.0 -->
<title>JS: Vote On Content - Steem Developer</title>
<meta property="og:title" content="JS: Vote On Content" />
<meta name="description" content="Create a weighted up or down vote on a comment or post and send it to Steem" />
<meta property="og:description" content="Create a weighted up or down vote on a comment or post and send it to Steem" />
<link rel="canonical" href="https://developer.steem.io/tutorials-javascript/vote_on_content" />
<meta property="og:url" content="https://developer.steem.io/tutorials-javascript/vote_on_content" />
<meta property="og:site_name" content="Steem Developer" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2018-07-20T12:56:08-05:00" />
<script type="application/ld+json">
{"@context": "http://schema.org",
"@type": "BlogPosting",
"headline": "JS: Vote On Content",
"datePublished": "2018-07-20T12:56:08-05:00",
"description": "Create a weighted up or down vote on a comment or post and send it to Steem",
"url": "https://developer.steem.io/tutorials-javascript/vote_on_content"}</script>
<!-- End Jekyll SEO tag -->


	
</head>
<body>
<header>
	<h1>
		<button type="button" class="open-nav" id="open-nav"></button>
		<a href="/"  class="logo-link"><img src="/images/logotype_white.svg" height="40" alt="Steem Developer logo"></a>
	</h1>

	
	<form action="/search/" method="get">
		<input type="text" name="q" id="search-input" placeholder="Search">
		<input type="submit" value="Search" style="display: none;">
	</form>
	

	<div id="sidebar" class="sidebar">
	
	
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/">
		<h6 class="ctrl-nav-section title">Introduction</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/#introduction-welcome">Welcome to Steem</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/quickstart/">
		<h6 class="ctrl-nav-section title">Quickstart</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/quickstart/#quickstart-choose-library">Choose Library</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-steemd-nodes">steemd Nodes</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-testnet">Steem Testnet</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/tutorials/">
		<h6 class="ctrl-nav-section title">Tutorials</h6>
		<ul class="cont-nav-section content">
			
				
					
						<li><a href="/tutorials/#tutorials-javascript">Javascript</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-python">Python</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-ruby">Ruby</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-recipes">Recipes</a></li>
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/services/">
		<h6 class="ctrl-nav-section title">Services</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/services/#services-steemit">Steemit.com</a></li>
						
					
						
						<li><a href="/services/#services-steemconnect">SteemConnect</a></li>
						
					
						
						<li><a href="/services/#services-jussi">jussi</a></li>
						
					
						
						<li><a href="/services/#services-imagehoster">ImageHoster</a></li>
						
					
						
						<li><a href="/services/#services-sbds">SBDS</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/apidefinitions/">
		<h6 class="ctrl-nav-section title">Appbase API</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/apidefinitions/#apidefinitions-condenser-api">Condenser Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-by-key-api">Account By Key Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops-comment">Broadcast Ops Comment</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-history-api">Account History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-database-api">Database Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-follow-api">Follow Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-jsonrpc">Jsonrpc</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-market-history-api">Market History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-network-broadcast-api">Network Broadcast Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-tags-api">Tags Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-witness-api">Witness Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-block-api">Block Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops">Broadcast Ops</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/community/">
		<h6 class="ctrl-nav-section title">Community</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/community/#community-overview">Overview</a></li>
						
					
						
						<li><a href="/community/#community-resources">Resources</a></li>
						
					
						
						<li><a href="/community/#community-developeradvocate">Sharing & Help</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/glossary/">
		<h6 class="ctrl-nav-section title">Glossary</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/glossary/#glossary-chain-basics">Chain Basics</a></li>
						
					
						
					
						
						<li><a href="/glossary/#glossary-governance">Governance</a></li>
						
					
						
						<li><a href="/glossary/#glossary-transactions">Transactions</a></li>
						
					
						
						<li><a href="/glossary/#glossary-api">API</a></li>
						
					
						
						<li><a href="/glossary/#glossary-market">Market</a></li>
						
					
				
			
		</ul>
	</section>
	
</div>


	<!--<p class="copyright">-->
	<!--<a href="https://steemit.com.com/">-->
	<!--steemit-->
	<!--</a>-->
	<!--</p>-->
	<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</header>
<div class="main" id="top">
	<div class="hero">
		<h1 class="hero__h1">Steem Developer Portal </h1>
		
		<img class="hero__img" src="/images/hero.png">
		
	</div>
	<section id="tutorials-javascript-vote-on-content" class="row tutorials-javascript-vote-on-content">
	<h3>
		<a id="tutorials-javascript-vote-on-content">
			JS: Vote On Content
			
		</a>
	</h3>
	
		<p class="description">Create a weighted up or down vote on a comment or post and send it to Steem</p>
	

	<p><span class="fa-pull-left top-of-tutorial-repo-link"><span class="first-word">Full</span>, runnable src of <a href="https://github.com/steemit/devportal-tutorials-js/tree/master/tutorials/17_vote_on_content">Vote On Content</a> can be downloaded as part of the <a href="https://github.com/steemit/devportal-tutorials-js">JS tutorials repository</a>.</span>
<br /></p>

<p>This tutorial will take you through the process of preparing and submitting a <code class="highlighter-rouge">vote</code> using the <code class="highlighter-rouge">broadcast</code> operation.
Because this tutorial essentially produces spam, it will be pointed at a Steem testnet. The testnet is an open resource,
so the default account and posting key in this tutorial may have been changed by another developer learning the ropes.
If that happens, you’ll want to create a new account on the testnet and use that account’s credentials instead.</p>

<p>To learn more about the testnet, including an easy way to create a play account, visit https://testnet.steem.vc/</p>

<h2 id="intro">Intro</h2>

<p>We are using the <code class="highlighter-rouge">broadcast.vote</code> function provided by the <code class="highlighter-rouge">dsteem</code> library to send the transaction through to the
network. On the Steem platform, posts and comments are all internally stored as a <code class="highlighter-rouge">comment</code> object, differentiated by
whether or not a <code class="highlighter-rouge">parent_author</code> exists. When there is no <code class="highlighter-rouge">parent_author</code>, then it’s a post, when there is, it’s a
comment. Voting is done on either of the two based on the author and permlink of the comment. There are 5 parameters
required for the voting operation:</p>

<ol>
  <li><em>Username</em> - The username of the account making the vote (the voter)</li>
  <li><em>Privatekey</em> - This is the private posting key of the voter</li>
  <li><em>Author</em> - The author of the comment/post that the voter is voting on</li>
  <li><em>Permlink</em> - The unique identifier of the comment/post of the author</li>
  <li><em>Weight</em> - This is the weight that the vote will carry. The value ranges from -10000 (100% flag) to 10000 (100% upvote)</li>
</ol>

<p>Due to the low amount of posts on the testnet we added an additional step to create a post before we vote on it. The values are auto loaded in the respective input boxes. A full tutorial on how to create a new post can be found on the <a href="https://developers.steem.io/tutorials-javascript/submit_post">Steem Devportal</a></p>

<h2 id="steps">Steps</h2>

<ol>
  <li><a href="#connection"><strong>Configure connection</strong></a> Configuration of <code class="highlighter-rouge">dsteem</code> to communicate with a Steem blockchain</li>
  <li><a href="#createpost"><strong>Create new post</strong></a> Creating a new post on the testnet</li>
  <li><a href="#input"><strong>Input variables</strong></a> Collecting the required inputs via an HTML UI</li>
  <li><a href="#broadcast"><strong>Broadcast</strong></a> Creating an object and broadcasting the vote to the blockchain</li>
</ol>

<h4 id="1-configure-connection">1. Configure connection<a name="connection"></a></h4>

<p>As usual, we have a <code class="highlighter-rouge">public/app.js</code> file which holds the Javascript segment of the tutorial. In the first few lines we define the configured library and packages:</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kr">const</span> <span class="nx">dsteem</span> <span class="o">=</span> <span class="nx">require</span><span class="p">(</span><span class="s1">'dsteem'</span><span class="p">);</span>

<span class="kr">const</span> <span class="nx">addressPrefix</span> <span class="o">=</span> <span class="s1">'STX'</span><span class="p">;</span>
<span class="kr">const</span> <span class="nx">chainId</span> <span class="o">=</span>
    <span class="s1">'79276aea5d4877d9a25892eaa01b0adf019d3e5cb12a97478df3298ccdd01673'</span><span class="p">;</span>
<span class="kr">const</span> <span class="nx">apiUrl</span> <span class="o">=</span> <span class="s1">'https://testnet.steem.vc'</span><span class="p">;</span>

<span class="kr">const</span> <span class="nx">opts</span> <span class="o">=</span> <span class="p">{</span>
    <span class="nx">addressPrefix</span><span class="p">,</span>
    <span class="nx">chainId</span><span class="p">,</span>
<span class="p">};</span>

<span class="kr">const</span> <span class="nx">client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">dsteem</span><span class="p">.</span><span class="nx">Client</span><span class="p">(</span><span class="s1">'https://testnet.steem.vc'</span><span class="p">,</span> <span class="nx">opts</span><span class="p">);</span>
</code></pre>
</div>

<p>Above, we have <code class="highlighter-rouge">dsteem</code> pointing to the test network with the proper chainId, addressPrefix, and endpoint.<br />
Because this tutorial modifies the blockchain, we will use a testnet and a predefined account to demonstrate voting.</p>

<h4 id="2-create-new-post">2. Create new post<a name="createpost"></a></h4>

<p>A new blog post is created on the testnet with the necessary variables for the vote function being allocated as well. If a post is successfully created it will display a block number and a value will be assigned to the <code class="highlighter-rouge">permlink</code> variable.</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="c1">//refer to "10_submit_post" in the tutorials folder for creating a post on steemit</span>
<span class="c1">//create post function</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">createPost</span> <span class="o">=</span> <span class="nx">async</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="c1">//get private key</span>
    <span class="kr">const</span> <span class="nx">privateKey</span> <span class="o">=</span> <span class="nx">createPrivateKey</span><span class="p">();</span>
    <span class="c1">//get account name</span>
    <span class="kr">const</span> <span class="nx">account</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'username'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
    <span class="c1">//for content</span>
    <span class="kr">const</span> <span class="nx">time</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Date</span><span class="p">().</span><span class="nx">getTime</span><span class="p">();</span>
    <span class="c1">//get title</span>
    <span class="kr">const</span> <span class="nx">title</span> <span class="o">=</span> <span class="err">`</span><span class="nx">developers</span><span class="p">.</span><span class="nx">steem</span><span class="p">.</span><span class="nx">io</span> <span class="o">-</span> <span class="nx">JS</span><span class="o">-</span><span class="na">T</span><span class="p">:</span><span class="mi">17</span> <span class="nx">$</span><span class="p">{</span><span class="nx">time</span><span class="p">}</span><span class="err">`</span><span class="p">;</span>
    <span class="c1">//get body</span>
    <span class="kr">const</span> <span class="nx">body</span> <span class="o">=</span> <span class="err">`</span><span class="nx">Go</span> <span class="nx">to</span> <span class="p">[</span><span class="nx">developers</span><span class="p">.</span><span class="nx">steem</span><span class="p">.</span><span class="nx">io</span><span class="p">](</span><span class="na">https</span><span class="p">:</span><span class="c1">//developers.steem.io) for the latest in Steem tutorials! This post was created by someone using the active version of those tutorials at  [https://github.com/steemit/devportal-tutorials-js](https://github.com/steemit/devportal-tutorials-js)</span>
        
        <span class="nx">$</span><span class="p">{</span><span class="nx">time</span><span class="p">}</span><span class="err">`</span><span class="p">;</span>
    <span class="c1">//get tags and convert to array list</span>
    <span class="kr">const</span> <span class="nx">tags</span> <span class="o">=</span> <span class="s1">'blog'</span><span class="p">;</span>
    <span class="kr">const</span> <span class="nx">taglist</span> <span class="o">=</span> <span class="nx">tags</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">' '</span><span class="p">);</span>
    <span class="c1">//make simple json metadata including only tags</span>
    <span class="kr">const</span> <span class="nx">json_metadata</span> <span class="o">=</span> <span class="nx">JSON</span><span class="p">.</span><span class="nx">stringify</span><span class="p">({</span> <span class="na">tags</span><span class="p">:</span> <span class="nx">taglist</span> <span class="p">});</span>
    <span class="c1">//generate random permanent link for post</span>
    <span class="kr">const</span> <span class="nx">permlink</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span>
        <span class="p">.</span><span class="nx">toString</span><span class="p">(</span><span class="mi">36</span><span class="p">)</span>
        <span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mi">2</span><span class="p">);</span>

    <span class="nx">client</span><span class="p">.</span><span class="nx">broadcast</span>
        <span class="p">.</span><span class="nx">comment</span><span class="p">(</span>
            <span class="p">{</span>
                <span class="na">author</span><span class="p">:</span> <span class="nx">account</span><span class="p">,</span>
                <span class="na">body</span><span class="p">:</span> <span class="nx">body</span><span class="p">,</span>
                <span class="na">json_metadata</span><span class="p">:</span> <span class="nx">json_metadata</span><span class="p">,</span>
                <span class="na">parent_author</span><span class="p">:</span> <span class="s1">''</span><span class="p">,</span>
                <span class="na">parent_permlink</span><span class="p">:</span> <span class="nx">tags</span><span class="p">,</span>
                <span class="na">permlink</span><span class="p">:</span> <span class="nx">permlink</span><span class="p">,</span>
                <span class="na">title</span><span class="p">:</span> <span class="nx">title</span><span class="p">,</span>
            <span class="p">},</span>
            <span class="nx">privateKey</span>
        <span class="p">)</span>
        <span class="p">.</span><span class="nx">then</span><span class="p">(</span>
            <span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span>
                <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'permlink'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">permlink</span><span class="p">;</span>
                <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span>
                    <span class="s1">'postLink'</span>
                <span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="err">`</span><span class="nx">Included</span> <span class="k">in</span> <span class="na">block</span><span class="p">:</span> <span class="o">&lt;</span><span class="nx">a</span> <span class="nx">href</span><span class="o">=</span><span class="s2">"http://condenser.steem.vc/${
                    taglist[0]
                }/@${account}/${permlink}"</span> <span class="nx">target</span><span class="o">=</span><span class="s2">"_blank"</span><span class="o">&gt;</span><span class="nx">$</span><span class="p">{</span>
                    <span class="nx">result</span><span class="p">.</span><span class="nx">block_num</span>
                <span class="p">}</span><span class="o">&lt;</span><span class="sr">/a&gt;`</span><span class="err">;
</span>                <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'postResult'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="s1">'flex'</span><span class="p">;</span>
                <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'permlink'</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">permlink</span><span class="p">;</span>
            <span class="p">},</span>
            <span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">error</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">);</span>
<span class="p">};</span>
</code></pre>
</div>

<p>You may have noted the mystery function <code class="highlighter-rouge">createPrivateKey()</code>. It’s a convenience function that allows us to give the
user some meaningful UI feedback if they put in a bad posting key. The important part of it is
<code class="highlighter-rouge">return dsteem.PrivateKey.fromString(&lt;somestring&gt;)</code> but its full glory can be seen in the snippet below</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kr">const</span> <span class="nx">createPrivateKey</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">try</span> <span class="p">{</span>
        <span class="k">return</span> <span class="nx">dsteem</span><span class="p">.</span><span class="nx">PrivateKey</span><span class="p">.</span><span class="nx">fromString</span><span class="p">(</span>
            <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'postingKey'</span><span class="p">).</span><span class="nx">value</span>
        <span class="p">);</span>
    <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
        <span class="kr">const</span> <span class="nx">resultEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'result'</span><span class="p">);</span>
        <span class="nx">resultEl</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">'form-control-plaintext alert alert-danger'</span><span class="p">;</span>
        <span class="nx">resultEl</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">message</span> <span class="o">+</span> <span class="s1">' - See console for full error.'</span><span class="p">;</span>
        <span class="k">throw</span> <span class="nx">e</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">};</span>
</code></pre>
</div>

<h4 id="3-input-variables">3. Input variables<a name="input"></a></h4>

<p>The required parameters for the vote operation is recorded via an HTML UI that can be found in the <code class="highlighter-rouge">public/index.html</code> file. The values are pre-populated in this case with a testnet <code class="highlighter-rouge">demo</code> account. The vote weight is input via a slider as this value can range between -10000 and 10000 denoting either a 100% flag or 100% upvote.</p>

<p>The parameter values are allocated as seen below, once the user clicks on the “Submit” button.</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="nb">window</span><span class="p">.</span><span class="nx">submitVote</span> <span class="o">=</span> <span class="nx">async</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="c1">//we'll make use of resultEl in multiple child scopes. This is generally good practice.</span>
    <span class="kr">const</span> <span class="nx">resultEl</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'result'</span><span class="p">);</span>
    <span class="nx">resultEl</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s1">'pending...'</span><span class="p">;</span>

    <span class="c1">//get all values from the UI//</span>
    <span class="c1">//get account name of voter</span>
    <span class="kr">const</span> <span class="nx">voter</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'username'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
    <span class="c1">//get private posting key</span>
    <span class="kr">const</span> <span class="nx">privateKey</span> <span class="o">=</span> <span class="nx">createPrivateKey</span><span class="p">();</span>
    <span class="c1">//get author of post/comment to vote</span>
    <span class="kr">const</span> <span class="nx">author</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'author'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
    <span class="c1">//get post permalink to vote</span>
    <span class="kr">const</span> <span class="nx">permlink</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'permlink'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
    <span class="c1">//get weight of vote</span>
    <span class="kr">const</span> <span class="nx">weight</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'currentWeight'</span><span class="p">).</span><span class="nx">innerHTML</span><span class="p">,</span>
        <span class="mi">10</span>
    <span class="p">);</span>
    <span class="p">....</span>
</code></pre>
</div>

<p>The <code class="highlighter-rouge">weight</code> parameter is required to be an interger for the vote operation so we parse it from the UI text field. The <code class="highlighter-rouge">permlink</code> value is retrieved from the <code class="highlighter-rouge">create post</code> function.</p>

<h4 id="4-broadcast">4. Broadcast<a name="broadcast"></a></h4>

<p>We create a <code class="highlighter-rouge">vote object</code> with the input variables before we can broadcast to the blockchain.</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="kr">const</span> <span class="nx">vote</span> <span class="o">=</span> <span class="p">{</span>
    <span class="nx">voter</span><span class="p">,</span>
    <span class="nx">author</span><span class="p">,</span>
    <span class="nx">permlink</span><span class="p">,</span>
    <span class="nx">weight</span><span class="p">,</span> <span class="c1">//needs to be an integer for the vote function</span>
<span class="p">};</span>
</code></pre>
</div>

<p>After which we can complete the <code class="highlighter-rouge">broadcast.vote</code> operation with the created object and private posting key received from the input UI. The result of the vote is displayed on the UI to confirm whether it was a <code class="highlighter-rouge">success</code> or <code class="highlighter-rouge">failed</code> with details of that process being displayed on the console.</p>

<div class="language-javascript highlighter-rouge"><pre class="highlight"><code><span class="nx">client</span><span class="p">.</span><span class="nx">broadcast</span><span class="p">.</span><span class="nx">vote</span><span class="p">(</span><span class="nx">vote</span><span class="p">,</span> <span class="nx">privateKey</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span>
        <span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'success:'</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>
            <span class="nx">resultEl</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">'form-control-plaintext alert alert-success'</span><span class="p">;</span>
            <span class="nx">resultEl</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="s1">'Success! See console for full response.'</span><span class="p">;</span>
        <span class="p">},</span>
        <span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s1">'error:'</span><span class="p">,</span> <span class="nx">error</span><span class="p">);</span>
            <span class="nx">resultEl</span><span class="p">.</span><span class="nx">className</span> <span class="o">=</span> <span class="s1">'form-control-plaintext alert alert-danger'</span><span class="p">;</span>
            <span class="nx">resultEl</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span>
                <span class="nx">error</span><span class="p">.</span><span class="nx">jse_shortmsg</span> <span class="o">+</span> <span class="s1">' - See console for full response.'</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">);</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">voteWeightSlider</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'voteWeight'</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">currentWeightDiv</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'currentWeight'</span><span class="p">);</span>
    <span class="nx">currentWeightDiv</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">voteWeightSlider</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
    <span class="nx">voteWeightSlider</span><span class="p">.</span><span class="nx">oninput</span> <span class="o">=</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
        <span class="nx">currentWeightDiv</span><span class="p">.</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
    <span class="p">};</span>
</code></pre>
</div>

<p>More information on how to use the <code class="highlighter-rouge">broadcast</code> operation and options surrounding the operation can be found on the <a href="https://developers.steem.io/apidefinitions/#broadcast_ops_vote">Steem Devportal</a></p>

<h3 id="to-run-this-tutorial">To run this tutorial</h3>

<ol>
  <li>clone this repo</li>
  <li><code class="highlighter-rouge">cd tutorials/17_vote_on_content</code></li>
  <li><code class="highlighter-rouge">npm i</code></li>
  <li><code class="highlighter-rouge">npm run dev-server</code> or <code class="highlighter-rouge">npm run start</code></li>
  <li>After a few moments, the server should be running at http://localhost:3000/</li>
</ol>

<hr />

</section>

</div>
<div class="footer">
	<a href="#">Back to top</a>
</div>
<script>
    document.getElementById("open-nav").addEventListener("click", function () {
        document.body.classList.toggle("nav-open");
    });
</script>
</body>
</html>


<script src="/js/adjust.js"></script>

